<template>
  <div style="background-color: #ececec; padding: 20px">
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card :title="isedit ? '管理分类' : '添加分类'" :bordered="false">
          <a-form :model="datas" @finish="onFinish">
            <a-form-item>
              <a-input v-model:value="datas.label" placeholder="请输入分类名称" />
            </a-form-item>
            <a-form-item>
              <a-input v-model:value="datas.value" placeholder="请输入分类值（英文）" />
            </a-form-item>
            <a-form-item v-if="isedit">
              <a-button type="primary" @click="edit">更新</a-button>
              <a-button @click="adds">返回添加</a-button>
              <a-button type="dashed" danger @click="remove">删除</a-button>
            </a-form-item>
            <a-form-item v-else>
              <a-button type="primary" html-type="submit">添加</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="所有分类" :bordered="false">
          <a-space class="spaces">
            <a-tag color="pink" v-for="(item, ind) in tag" :key="ind" @click="() => tocategory(item)">{{ item.label
            }}</a-tag>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { storeToRefs } from "pinia";
import { useHome } from "../../store/home"
const homes = useHome()

homes.gettag()
let { tag } = storeToRefs(homes)
let isedit = ref(false);
let ids = ref("");
let datas = reactive({
  label: "",
  value: ""
});

//添加分类标签
let onFinish = () => {
  let obj = {
    label:datas.label,
    value: datas.value
  }
  homes.addtag(obj)
  datas.label = ""
  datas.value = ""
}
//回显 切换左侧状态
let tocategory = (item: any) => {
  isedit.value = true
  datas.label = item.label
  datas.value = item.value
  ids.value = item.id
}
//切回 左侧添加状态
let adds = () => {
  isedit.value = false
  datas.label = ""
  datas.value = ""
}
//删除分类标签
let remove = () =>{
  homes.removetag(ids.value)
  datas.label = ""
  datas.value = ""
}
//更新分类标签
let edit = () =>{
  let obj = {
    label:datas.label,
    value: datas.value
  }
  homes.edittag(ids.value,obj)
  adds()
}
</script>

<style lang="scss">
.spaces {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}
</style>